<template>
  <div style="padding:20px;">
    <m-table
      ref="mTable"
      :data="tableData"
      :show-index="true"
      :show-selection="true"
      :table-column="tableColumn"
    >
      <template
        #customOperate="{slotScope: {row}}"
      >
        <m-button
          size="mini"
          @click="editRow(row)"
        >
          Edit
        </m-button>
        <m-button
          size="mini"
          type="danger"
        >
          Delete
        </m-button>
      </template>
    </m-table>
    <m-pagination
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @current-change="pageChange"
      @size-change="handleSizeChange"
    />
    <m-select
      v-model="selectValue"
      filterable
      :options="options"
      @change="handleChange"
    >
      <!-- <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      /> -->
    </m-select>
    <m-button @click="clear">
      456
    </m-button>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator'
import { getArticles } from '@demo/api/articles'
import { IArticleData } from '@demo/api/types'

@Component({
  name: 'Table',
  filters: {
    statusFilter: (status: string) => {
      const statusMap: { [key: string]: string } = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    parseTime: (timestamp: string) => {
      return new Date(timestamp).toISOString()
    }
  }
})
export default class extends Vue {
  selectValue:string = ''
  pageNum:number = 1
  pageSize:number = 10
  total:number = 25
  tableData:any[] = [
    { databaseName: '123', remark: '123', isUse: 1, updateTime: '123456' },
    { databaseName: '456', remark: '456', isUse: 1, updateTime: '456' }
  ]
  tableColumn:any[] = [
    { prop: 'databaseName', label: '数据库名称' },
    { prop: 'remark', label: '备注', minWidth: '260' },
    { prop: 'isUse', label: '状态', slotName: 'state' },
    { prop: 'updateTime', label: '更新时间', width: '200' },
    { prop: '', label: '操作', slotName: 'customOperate', unSortable: true }
  ]
  private options = [{
    value: '选项1',
    label: '黄金糕',
    disabled: true
  }, {
    value: '选项2',
    label: '双皮奶'
  }, {
    value: '选项3',
    label: '蚵仔煎'
  }, {
    value: '选项4',
    label: '龙须面'
  }, {
    value: '选项5',
    label: '北京烤鸭'
  }]
  // private list: IArticleData[] = []
  // private listLoading = true
  // private listQuery = {
  //   page: 1,
  //   limit: 20
  // }

  created() {

  }
  mounted() {
  }

  pageChange(v:number) {
    this.pageNum = v
  }

  handleSizeChange(v:number) {
    this.pageSize = v
  }

  handleChange(v) {
    console.log(v)
  }

  clear() {
    (this.$refs.mTable as any).clearSort()
  }

  editRow(row) {
    console.log(row)
  }
}
</script>
